import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, message, Form, Input } from 'antd';
import {loginFn} from '../../api/user'
import './index.scss'
import { connect } from 'react-redux';

// 在 react-router 和 react-router-dom 都可以解构 useHistory
// import { useHistory } from 'react-router';
import { useHistory } from 'react-router-dom';

const App = ({login}) => {
  const [messageApi, contextHolder] = message.useMessage();

  const router = useHistory()

  const onFinish = (values) => {
    // 表单的提交事件
    // console.log('Received values of form: ', values);
    login(values,messageApi).then(()=>{
      // 登录完成之后的处理
      // 跳转到首页
      router.push('/')
    })
  };
  return (
    <>
      {contextHolder}
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="adminname"
        rules={[
          {
            required: true,
            message: '管理员账号不能为空!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入管理员名称" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '密码不能为空!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入管理员密码"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住密码</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href=" ">
          忘记密码
        </a>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
        或 <a href=" ">去注册!</a>
      </Form.Item>
    </Form>
    </>

  );
};
export default connect(null, dispatch => {
  return {
    login(values,messageApi){
      return new Promise(resolve => {
        loginFn(values).then(res => {
          // console.log(res);
          if(res.code === '200'){
            // console.log('成功');
            messageApi.open({
              type: 'success',
              content: '恭喜你登录成功了！',
            });
            // 将用户的登录状态存到本地
            localStorage.setItem('loginState', true)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('adminname', res.data.adminname)
            localStorage.setItem('role', res.data.role)
            localStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys))

            // 将用户状态存到全局状态
            dispatch({type: 'change-login-state', payload: true})
            dispatch({type: 'change-token', payload: res.data.token})
            dispatch({type: 'change-admin-name', payload: res.data.adminname})
            dispatch({type: 'change-role', payload: res.data.role})
            dispatch({type: 'change-checkedkeys', payload: res.data.checkedkeys})


            // 告诉展示组件我们登录处理完成了，你可以进行跳转到想要去的页面
            resolve()
          }else {
            console.log('失败');
            messageApi.open({
              type: 'error',
              content: '温馨提示：' + res.message,
            });
          }
        })
      })
    }
  }
})(App);
